<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style>
			div{
			width:200px;
			height: 200px;
		}
		.div1
		{
		width:100px;
		height:100px;
		background:red;
		position:relative;
		animation:mymove 5s infinite;
		-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
		}
		
		@keyframes mymove
		{
		from {left:0px;}
		to {left:200px;}
		}
		
		@-webkit-keyframes mymove /*Safari and Chrome*/
		{
		from {left:0px;}
		to {left:200px;}
		}
		.div2
		{
		width:100px;
		height:100px;
		background:red;
		position:relative;
		animation:myfirst 5s infinite linear ;
		-moz-animation:myfirst 5s infinite linear ; /* Firefox */
		-webkit-animation:myfirst 5s infinite linear ; /* Safari and Chrome */
		-o-animation:myfirst 5s infinite linear ; /* Opera */
		}
		@keyframes myfirst
		{
		0%   {background-image: url('大作业/image/20180617225257_uqscd.jpeg'); left:0px; top:0px;}
		25%  {background:yellow; left:200px; top:0px;}
		50%  {background:blue; left:200px; top:200px;}
		75%  {background:green; left:0px; top:200px;}
		100% {background:red; left:0px; top:0px;}
		}

		@-moz-keyframes myfirst /* Firefox */
		{
		0%   {background-image: url('大作业/image/20180617225257_uqscd.jpeg'); left:0px; top:0px;}
		25%  {background:yellow; left:200px; top:0px;}
		50%  {background:blue; left:200px; top:200px;}
		75%  {background:green; left:0px; top:200px;}
		100% {background:red; left:0px; top:0px;}
		}
		
		@-webkit-keyframes myfirst /* Safari and Chrome */
		{
		0%   {background-image: url('大作业/image/20180617225257_uqscd.jpeg'); left:0px; top:0px;}
		25%  {background:yellow; left:200px; top:0px;}
		50%  {background:blue; left:200px; top:200px;}
		75%  {background:green; left:0px; top:200px;}
		100% {background:red; left:0px; top:0px;}
		}
		
		@-o-keyframes myfirst /* Opera */
		{
		0%   {background-image: url('大作业/image/20180617225257_uqscd.jpeg'); left:0px; top:0px;}
		25%  {background:yellow; left:200px; top:0px;}
		50%  {background:blue; left:200px; top:200px;}
		75%  {background:green; left:0px; top:200px;}
		100% {background:red; left:0px; top:0px;}
		}
		</style>

	</head>
	<body>
		<div style="box-shadow:-4px -4px 10px #f00; border:1px solid green"></div> <br>
		<div style="box-shadow:4px 4px 10px #f00; border:1px solid green"></div><br>
		<div style="box-shadow: 0 0 10px #f00; border:1px solid green"></div><br>
		<div style="box-shadow: 0px 0px 10px red inset; border:1px solid green"></div><br>
		<div  style="box-shadow:-10px 0px 10px red,   /*左边阴影*/ 
                                                   0px -10px 10px #000,  /*上边阴影*/ 
                                                   10px 0px 10px green,  /*右边阴影*/ 
                                                   0px 10px 10px blue;" /*下边阴影*/ ></div>
                                                   
                                                   
        <div class="div1"></div><br>
        <div class="div2"></div>	
        
	</body>
</html>
